<script setup>
import { ref, onMounted, toRefs } from 'vue'
import {unit2} from '../unit.js'

defineProps({
    config: Object,
});



</script>

<template>

    <div :style="{position: 'relative', fontSize: unit2(config?.fontSize)}">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M95.83,158.33c-34.16,0-62.5-28.33-62.5-62.5s28.34-62.5,62.5-62.5,62.5,28.34,62.5,62.5S130,158.33,95.83,158.33Zm0-8.33A54.17,54.17,0,1,0,41.67,95.83,54.06,54.06,0,0,0,95.83,150Zm51.67-8.33L170.83,165,165,170.83,141.67,147.5Z" fill="#FFF"/></svg>
        <input type="text" :name="config?.name" class="input" :placeholder="config?.label"
        :style="{
            fontSize: unit2(config?.fontSize),
            color: config?.color,
            backgroundColor: config?.backgroundColor,
            borderRadius: unit2(config?.borderRadius),
            borderWidth: unit2(config?.borderWidth),
            borderColor: config?.borderColor,
        }"></input>
    </div>

</template>

<style scoped>
    .input{
        width: 100%;margin: 0 auto;line-height: 2.6;
        border: #dddddd 1px solid;padding: 0 1em 0 2.5em;
    }
    svg{
        position: absolute;top: 50%;left: 0;width: 1.6em; height: 1.6em;
        margin: -0.85em 0 0 0.5em;
        mix-blend-mode: difference;
    }
</style>